<template>
      <div class="admin-box">
            <div class="login-area flex ali-center jus-center">
                  <div class="login-logo-box flex ali-center">
                        <div>
                              <div class="head-image-box">
                                    <img src="https://cdn.pixabay.com/photo/2019/07/14/16/29/pen-4337524_960_720.jpg" alt="">
                              </div>
                              <div class="login-user-name-box">
                                    <span>用户名称</span>
                              </div>
                        </div>
                  </div>
                  <div class="flex-1 login-ipt-area">
                        <div class="ft-center">
                              <h3>欢迎登录</h3>
                        </div>
                        <div>
                              <form action="/admin/news/index.html" method="get">
                                    <label for="" class="ipt-box">
                                          <input type="text" name="" id="" placeholder="管理员账号">
                                          <span>账号错误</span>
                                    </label>
                                    <label for="" class="ipt-box">
                                          <input type="password" name="" id="" placeholder="管理员密码">
                                          <span>密码错误</span>
                                    </label>
                                    <label for="" class="flex">
                                          <input type="submit" value="">
                                          <input type="reset" value="">
                                    </label>
                              </form>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script lang="ts" setup>
</script>

<style scoped>
.admin-box {
      height: calc(100vh);
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('https://cdn.pixabay.com/photo/2019/07/14/16/29/pen-4337524_960_720.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
}

form {
      display: flex;
      flex-direction: column;
}

.login-area {
      width: 640px;
      height: 400px;
      color: #000;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 15px;
}

.login-logo-box {
      margin: 0 50px;
      padding-right: 50px;
      height: 100%;
      box-shadow: 7px 0px 7px -7px #b9b9b9;
}

.login-logo-box img {
      display: flex;
      width: 100px;
      height: 100px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 3px 1px #e9e9e9;
}

h3 {
      margin-bottom: 30px;
}

.ipt-box {
      display: flex;
      margin-bottom: 33px;
      position: relative;
}

.ipt-box input {
      height: 50px;
      width: 100%;
      text-indent: 20px;
      border: none;
      outline: none;
      background-color: rgb(230, 230, 230);
      border-radius: 5px;
}

input[type="password"] {
     padding-right: 20px;
}

.ipt-box span {
      visibility: hidden;
      position: absolute;
      bottom: -23px;
      left: 10px;
      font-size: 13px;
      color: rgb(226, 9, 9);
}

.login-ipt-area {
      margin-right: 50px;
}

input[type="submit"], input[type="reset"] {
      width: 100%;
      height: 50px;
      margin-top: 25px;
      background-color: var(--main-color);
      color: #fff;
      outline: none;
      border: none;
      border-radius: 10px;
}

input[type="reset"] {
      color: #000;
      margin-left: 30px;
      background-color: rgb(230, 230, 230);
}

.login-user-name-box {
      margin-top: 15px;
      font-weight: bold;
      color: var(--main-color);
      text-align: center;
}

.login-ipt-area h3 {
      letter-spacing: 2px;
      font-size: 28px;
      font-weight: 500;
}

.login-user-name-box, .ipt-box input,input[type="submit"], input[type="reset"] {
      font-size: 15px;
}

.head-image-box img {
      object-fit: cover;
}
</style>